<template>
  <view class="page flex-col">
    <view class="section_1 flex-col">
      <view class="group_1 flex-row">
      </view>
      <view class="text-group_1 flex-col">
        <text class="text_4">{{ parkData.status }}</text>
        <view class="text-wrapper_3">
          <text class="text_5">¥</text>
          <text class="text_6">{{ parkData.amount }}</text>
        </view>
      </view>
    </view>
    <view class="section_2 flex-col">
      <text class="text_7">{{ parkData.plateNumber }}</text>
      <text class="text_8">{{ parkData.location }}</text>
      <view class="text-wrapper_4 flex-row justify-between">
        <text class="paragraph_1">
          申请时间
          <br />
          安装时间
          <br />
          支付时间
        </text>
        <text class="paragraph_2">
          {{ parkData.applyTime }}
          <br />
          {{ parkData.installTime }}
          <br />
          {{ parkData.payTime }}
        </text>
      </view>
      <view class="group_2 flex-col"></view>
      <view class="group_3 flex-col"></view>
      <view class="group_4 flex-col"></view>
      <view class="group_5 flex-col"></view>
    </view>
    <view class="footer">
      <text class="refund-btn" @click="applyRefund">申请退款</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟数据
const parkData = ref({
  status: '已支付',
  amount: '1999.00',
  plateNumber: '皖A00000',
  location: '信誉创谷科技园-地面停车场-A1出口',
  applyTime: '2025年8月11日 11:00:00',
  installTime: '2025年8月11日 13:24:00',
  payTime: '2025年8月11日 13:24:00'
});

// 申请退款方法
const applyRefund = () => {
  uni.showToast({
    title: '退款申请已提交',
    icon: 'success',
    duration: 2000
  });
};
</script>

<style scoped>

page view {
  box-sizing: border-box;
  flex-shrink: 0;
}

body {
  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
    Arial, PingFang SC-Light, Microsoft YaHei;
  margin: 0;
}

button {
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
}

button:active {
  opacity: 0.6;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.align-start {
  display: flex;
  align-items: flex-start;
}

.align-center {
  display: flex;
  align-items: center;
}

.align-end {
  display: flex;
  align-items: flex-end;
}

.page {
  background-color: #ffffff;
  position: relative;
  width: 750rpx;
  height: 100vh;
  overflow: hidden;
  padding-top: 8rpx;
  padding-bottom: 100rpx;
}

.section_1 {
  background-image: url(https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/order/order-background.png);
  padding: 21rpx 19rpx 65rpx 35rpx;
  background-position: 0%;
}

.group_1 {
  margin: 0 21rpx 0 54rpx;
}

.text-group_1 {
  margin: 29rpx 177rpx 0 154rpx;
}

.text_4 {
  overflow-wrap: break-word;
  color: #000000;
  font-size: 38rpx;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 54rpx;
  margin: 0 121rpx 0 129rpx;
}

.text-wrapper_3 {
  width: 365rpx;
  height: 121rpx;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: AlibabaPuHuiTiR;
  font-weight: normal;
  text-align: right;
  line-height: 81rpx;
  margin-top: 17rpx;
}

.text_5 {
  height: 121rpx;
  overflow-wrap: break-word;
  color: #000000;
  font-size: 58rpx;
  font-family: AlibabaPuHuiTiR;
  font-weight: normal;
  text-align: left;
  line-height: 81rpx;
}

.text_6 {
  height: 121rpx;
  overflow-wrap: break-word;
  color: #000000;
  font-size: 88rpx;
  font-family: AlibabaPuHuiTiR;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 81rpx;
}

.section_2 {
  position: relative;
  padding: 35rpx 31rpx 60rpx 31rpx;
}

.text_7 {
  overflow-wrap: break-word;
  color: #000000;
  font-size: 35rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 48rpx;
  margin: 0 517rpx 0 8rpx;
}

.text_8 {
  overflow-wrap: break-word;
  color: #7a7a7c;
  font-size: 31rpx;
  font-family: AlibabaPuHuiTiR;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 42rpx;
  margin: 15rpx 190rpx 0 8rpx;
}

.text-wrapper_4 {
  width: 688rpx;
  margin-top: 29rpx;
}

.paragraph_1 {
  width: 108rpx;
  height: 306rpx;
  overflow-wrap: break-word;
  color: #7a7a7c;
  font-size: 27rpx;
  font-weight: normal;
  text-align: left;
  line-height: 102rpx;
  margin-top: 2rpx;
}

.paragraph_2 {
  /* width: 342rpx; */
  /* height: 306rpx; */
  overflow-wrap: break-word;
  color: #000000;
  font-size: 31rpx;
  font-weight: normal;
  text-align: center;
  line-height: 102rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 750rpx;
  height: 100rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 31rpx;
  background-color: #ffffff;
  /* border-top: 1rpx solid #f5f5f5; */
}

.refund-btn {
  overflow-wrap: break-word;
  color: #1ccbb4;
  font-size: 35rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 48rpx;
}

.group_2 {
  background-color: #dcdfec;
  position: absolute;
  left: 31rpx;
  top: 271rpx;
  width: 719rpx;
  height: 2rpx;
}

.group_3 {
  background-color: #dcdfec;
  position: absolute;
  left: 31rpx;
  top: 171rpx;
  width: 719rpx;
  height: 2rpx;
}

.group_4 {
  background-color: rgba(220, 223, 236, 0.6);
  position: absolute;
  left: 31rpx;
  top: 373rpx;
  width: 719rpx;
  height: 2rpx;
}

.group_5 {
  background-color: rgba(220, 223, 236, 0.6);
  position: absolute;
  left: 31rpx;
  top: 475rpx;
  width: 719rpx;
  height: 2rpx;
}
</style>
